<template>
  <view class="resume-subPage">
    <custom-navbar title="科研经历" :auto-back="true" left-icon-color="#303133" />
    <up-gap height="30rpx" />
    <view class="flex items-center justify-end px-24rpx">
      <up-icon :name="Img7" width="25rpx" height="25rpx" />
      <text class="ml-12rpx text-[26rpx] text-[#1f50f2] font-bold" @click="addJingLi">
        新增
      </text>
    </view>
    <up-gap height="30rpx" />
    <view class="block-box">
      <up-cell-group :border="false" :custom-style="{ padding: 0 }">
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              课题学历背景
            </text>
          </template>
          <template #value>
            <!-- <view @tap="showPicker('education_id')">
              <up-input v-model="testModel.education_id" :custom-style="{ border: 'none' }" font-size="26rpx" input-align="right" placeholder="请选择" />
            </view> -->
            <view @click="qualificationshow = true">
              {{ testModel.education_id ? getEducationName(testModel.education_id) : '请选择' }}
              <!-- <up-input v-model="testModel.education_id" :custom-style="{ border: 'none' }" font-size="26rpx" input-align="right" placeholder="请选择" /> -->
            </view>
          </template>
        </up-cell>
        <!-- <up-cell @click="showPop()"> -->
        <up-cell @click="showTime1 = true">
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              课题时间
            </text>
          </template>
          <template #value>
            <view>
              {{ dateFormat(time1) }}-{{ dateFormat(time2) }}
              <up-datetime-picker :show="showTime1" v-model="time1" mode="datetime" @confirm="confirmTime1"
                @cancel="showTime1 = false"></up-datetime-picker>
              <up-datetime-picker :show="showTime2" v-model="time2" mode="datetime" @confirm="confirmTime2"
                @cancel="showTime1 = false"></up-datetime-picker>
              <!-- <date-time ref="tbaimePop" type="date" :defaultData="testModel.time" :minDate="minDate" :maxDate="maxDate"  @change="timeChange"></date-time> -->
              <!--              <up-input v-model="testModel.time" :custom-style="{ border: 'none' }" font-size="26rpx" input-align="right" placeholder="请输入" />-->
            </view>
          </template>
        </up-cell>
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              研究方向
            </text>
          </template>
          <template #value>
            <view>
              <up-input v-model="testModel.research_direction" :custom-style="{ border: 'none' }" font-size="26rpx"
                input-align="right" placeholder="请输入" />
            </view>
          </template>
        </up-cell>
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              研究课题
            </text>
          </template>
          <template #value>
            <view>
              <up-input v-model="testModel.research_subject" :custom-style="{ border: 'none' }" font-size="26rpx"
                input-align="right" placeholder="请输入" />
            </view>
          </template>
        </up-cell>
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              主要导师
            </text>
          </template>
          <template #value>
            <view class="flex items-center">
              <view>
                <up-input v-model="testModel.mentor_name" :custom-style="{ border: 'none', width: '200rpx' }"
                  font-size="26rpx" input-align="right" placeholder="导师姓名" />
              </view>
              <up-line length="30rpx" color="#4f5760" direction="col" margin="0 12rpx" />
              <view>
                <up-input v-model="testModel.mentor_phone" :custom-style="{ border: 'none', width: '200rpx' }"
                  font-size="26rpx" input-align="right" placeholder="导师联系方式" />
              </view>
            </view>
          </template>
        </up-cell>
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              导师介绍
            </text>
          </template>
          <template #value>
            <view>
              <up-input v-model="testModel.mentor_info" :custom-style="{ border: 'none' }" font-size="26rpx"
                input-align="right" placeholder="请输入" />
            </view>
          </template>
        </up-cell>
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              课题描述
            </text>
          </template>
          <template #value>
            <view>
              <up-input v-model="testModel.subject_info" :custom-style="{ border: 'none' }" font-size="26rpx"
                input-align="right" placeholder="请输入" />
            </view>
          </template>
        </up-cell>
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              论文名称
            </text>
          </template>
          <template #value>
            <view>
              <up-input v-model="testModel.paper_name" :custom-style="{ border: 'none' }" font-size="26rpx"
                input-align="right" placeholder="请输入" />
            </view>
          </template>
        </up-cell>
        <view class="min-h-96rpx flex py-30rpx">
          <view class="w-25% flex shrink-0 flex-col items-center justify-start">
            <view
              class="mb-30rpx flex items-center justify-center text-[26rpx] text-[#333333] font-medium leading-[36rpx]"
              @click="oneAction(selectData.selectInfo[0])">
              <text class="mr-10rpx">
                作者顺序
              </text>
              <up-icon name="arrow-down-fill" size="16rpx" color="#999999" />
            </view>
            <view class="h-[36rpx] text-[26rpx] text-[#999999] font-medium">
              {{ selectData.selectInfo[0].value  }}
            </view>
          </view>
          <up-line length="30rpx" color="#4f5760" direction="col" />
          <view class="w-25% flex shrink-0 flex-col items-center justify-start">
            <view
              class="mb-30rpx flex items-center justify-center text-[26rpx] text-[#333333] font-medium leading-[36rpx]"
              @click="oneAction(selectData.selectInfo[1])">
              <text class="mr-10rpx">
                论文状态
              </text>
              <up-icon name="arrow-down-fill" size="16rpx" color="#999999" />
            </view>
            <view class="h-[36rpx] text-[26rpx] text-[#999999] font-medium">
              {{ selectData.selectInfo[1].value }}
            </view>
          </view>
          <up-line length="30rpx" color="#4f5760" direction="col" />
          <view class="w-25% flex shrink-0 flex-col items-center justify-start">
            <view
              class="mb-30rpx flex items-center justify-center text-[26rpx] text-[#333333] font-medium leading-[36rpx]"
              @click="oneAction(selectData.selectInfo[2])">
              <text class="mr-10rpx">
                学术期刊
              </text>
              <up-icon name="arrow-down-fill" size="16rpx" color="#999999" />
            </view>
            <view class="h-[36rpx] text-[26rpx] text-[#999999] font-medium">
              {{ selectData.selectInfo[2].value }}
            </view>
          </view>
          <up-line length="30rpx" color="#4f5760" direction="col" />
          <view class="w-25% flex shrink-0 flex-col items-center justify-start">
            <view
              class="mb-30rpx flex items-center justify-center text-[26rpx] text-[#333333] font-medium leading-[36rpx]"
              @click="oneAction(selectData.selectInfo[3])">
              <text class="mr-10rpx">
                期刊分类
              </text>
              <up-icon name="arrow-down-fill" size="16rpx" color="#999999" />
            </view>
            <view class="h-[36rpx] text-[26rpx] text-[#999999] font-medium">
              {{ selectData.selectInfo[3].value }}
            </view>
          </view>
        </view>
      </up-cell-group>
    </view>
    <view>
      <view class="h-190rpx pb-safe" />
      <view class="fixed bottom-0 left-0 w-100% flex items-center justify-between bg-#fff px-24rpx pt-24rpx pb-safe">
        <up-button :custom-style="{
          background: '#f3f4fa',
          color: '#1D2129',
          width: '338rpx',
          height: '82rpx',
          fontSize: '30rpx',
        }" shape="circle" text="删除" />
        <up-button :custom-style="{
          background: '#1f50f2',
          color: '#fff',
          width: '338rpx',
          height: '82rpx',
          fontSize: '30rpx',
        }" shape="circle" text="确定" @click="submitJianli" />
      </view>
    </view>
    <up-picker :show="qualificationshow" :columns="qualificationData" key-name="value"
      @close="qualificationshow = false" @confirm="qualificationConfirm" @cancel="qualificationshow = false" />
    <up-picker :show="show" :columns="columns" key-name="label" @close="close" @confirm="confirm"
      @cancel="show = false" />
  </view>
</template>

<script setup lang="ts">
  import { ScientificParams, customerScientificAdd } from '@/api/user/customer';
  // import Img7 from '@/static/images/userInfo/img-7.png';
  import { otherStore } from '@/store/index';
const Img7 = "https://yiliao.test03.qcw800.com/static/images/userInfo/img-7.png";
  const testModel = ref({
    resume_id: '',   //简历ID
    education_id: '', //教育经历ID
    time: '',//课题时间
    research_direction: '',   //研究方向
    research_subject: '', //研究课题
    mentor_name: '',    //导师名字
    mentor_phone: '',   //导师电话
    mentor_info: '',    //导师介绍
    subject_info: '', //课题描述
    paper_name: '', //论文名字
    author_order: '', //作者顺序
    paper_status: '', //发表状态
    academic_journals: '',  //学术期刊
    journals_type: '',  //期刊分类
  });
  const show = ref(false);
  const columns = ref([]);
  const showPicker = (value) => {
    console.log(value)
    show.value = true;
  };
  const close = () => {
    show.value = false;
  };
  // const confirm = ({ value } : { value : Array<{ label : string }> }) => {
  //   show.value = false;
  //   testModel.value = value.at(0)!.label;
  // };
  const cancel = () => {
    show.value = false;
  };

  const showTime1 = ref(false);
  const showTime2 = ref(false);
  const time1 = ref(Date.now());
  const time2 = ref(Date.now());
  const confirmTime1 = (e) => {
    time1.value = e.value
    showTime1.value = false
    showTime2.value = true
  };
  const confirmTime2 = (e) => {
    if (time1.value > e.value) {
      uni.showToast({ title: '结束时间不能小于开始时间', icon: 'none' })
      return
    }
    time2.value = e.value;
    showTime2.value = false;
    testModel.value.time = dateFormat(time1.value) + '-' + dateFormat(time2.value);
  };
  const dateFormat = (time) => {
    if (!time) {
      return ""
    }
    let date = new Date(time);
    let year = date.getFullYear();
    // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
    let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();


    return year + "." + month;

  }
  const resumeId = ref(0)
  const onClickSubmit = async () => {
    console.log('简历ID：：：', resumeId.value)
    if (resumeId.value == 0) {
      uni.showToast({ title: '简历异常' })
      return
    }
    let params : ScientificParams = {
      resume_id: resumeId.value,   //简历ID
      time: '2022.08-2023.05',
      research_direction: '中医方向',   //研究方向
      research_subject: '中医研究', //研究课题
      mentor_name: '李大帅',    //导师名字
      mentor_phone: 18812341234,   //导师电话
      mentor_info: '这是一个很好的老师',    //导师介绍
      subject_info: '这个是中医的课题描述', //课题描述
      paper_name: '', //论文名字
      author_order: '第一顺序', //作者顺序
      paper_status: '已发表', //发表状态
      academic_journals: 'SSC2',  //学术期刊
      journals_type: '这是期刊分类',  //期刊分类
      education_id: 10 //教育经历ID
    }
    console.log('参数：：：', params)
    let r = await customerScientificAdd(params)
    if (r > 0) {
      console.log('科研经历更新到简历成功  返回上级')
      uni.navigateBack()
    } else {
      uni.showToast({ title: '科研经历更新到简历失败' })
    }
  }

  const addJingLi = () => {
    console.log('0-------------0--------', testModel.value)
    // otherStore().setKeYanHistory(testModel.value)
    // uni.redirectTo({
    //   url: '/pages/userinfo/resume-create'
    // })
  }
  const submitJianli = async () => {
    if (resumeId.value == 0) {
      uni.showToast({ title: '简历异常' })
      return
    }
    let obj = {
      ...testModel.value,
      author_order: selectData.value.selectInfo[0].value, //作者顺序
      paper_status: selectData.value.selectInfo[1].value, //发表状态
      academic_journals: selectData.value.selectInfo[2].value,  //学术期刊
      journals_type: selectData.value.selectInfo[3].value,  //期刊分类
      resume_id: resumeId.value,   //简历ID
    }
    let r = await customerScientificAdd(obj)
    console.log('r-----返回值', r)
    if (r > 0) {
      console.log('科研经历更新到简历成功  返回上级')
      otherStore().setKeYanHistory(obj)
      // uni.redirectTo({
      //   url: `/pages/userinfo/resume-create?resume_id=${resumeId.value}`
      // })
      uni.navigateBack()
    } else {
      uni.showToast({ title: '科研经历更新到简历失败' })
    }

  }

  const timeChange = () => {
    console.log('时间选择器回调')
  }

  const timePop = ref(null)
  const showPop = () => {
    timePop.value.show();
  }
  const qualificationData = ref([]);
  const qualificationshow = ref(false);
  const qualificationConfirm = (event) => {
    console.log('选择学历', event);
    qualificationshow.value = false;
    testModel.value.education_id = event.value[0].key;
    console.log('testModel.value.education_id', testModel.value.education_id);

  };
  const getEducationName = (id) => {
    let name = '';
    qualificationData.value.forEach((item) => {
      item.forEach((item2) => {
        if (item2.key == id) {
          name = item2.value
        }
      })
    })
    return name
  };
  const selectData = ref({
    title: "",
    value: undefined,
    valueType: "selects",
    selectInfo: [
      {
        label: "作者顺序",
        value: "请选择",
        options: [],
      },
      {
        label: "论文状态",
        value: "请选择",
        options: [],
      },
      {
        label: "学术期刊",
        value: "请选择",
        options: [],
      },
      {
        label: "期刊分类",
        value: "请选择",
        options: [],
      },
    ],
  })
  const activeTitle = ref('')
  const oneAction = (params) => {
    columns.value = []
    if (params.options) {
      activeTitle.value = params.label
      show.value = true;
      columns.value = params.options;
    }
  };
  const confirm = (v) => {
    selectData.value.selectInfo.map(vi => {
      if (vi.label === activeTitle.value) {
        vi.value = v.value[0]
      }
    })
    activeTitle.value = ''
    show.value = false
  };
  onLoad((query : any) => {
    // qualificationData.value = uni.getStorageSync('config').configCli.config_qualification;
    let config = JSON.parse(uni.getStorageSync('config'));
    let qualification = config.configCli.config_qualification$$学历配置;
    qualificationData.value = [qualificationData.value.concat(qualification)];
    let auth_order = config.configCli['auth_order$$作者顺序-科研经历'];
    console.log('auth_order', auth_order);
    let arr = []
    auth_order.map(v => {
      arr.push(v.value)
    })
    selectData.value.selectInfo[0].options.push(arr)
    let paper_status = config.configCli.paper_status$$论文状态
    let arr2 = []
    paper_status.map(v => {
      arr2.push(v.value)
    })
    selectData.value.selectInfo[1].options.push(arr2)
    let academic_journals = config.configCli['academic_journals$$学术期刊-科研经历']
    let arr3 = []
    academic_journals.map(v => {
      arr3.push(v.value)
    })
    selectData.value.selectInfo[2].options.push(arr3)
    let journals_type = config.configCli['journals_type$$期刊分类-科研经历']
    let arr4 = []
    journals_type.map(v => {
      arr4.push(v.value)
    })
    selectData.value.selectInfo[3].options.push(arr4)
    console.log('selectData.value.selectInfo', selectData.value.selectInfo);
    if (query.resumeId) {
      console.log('科研经历页获取简历ID', query.resumeId)
      resumeId.value = query.resumeId
    }
  })
</script>

<script lang="ts">
  export default {
    options: {
      styleIsolation: 'shared',
    },
  };
</script>

<style lang="scss" scoped>
  .resume-subPage {
    .block-box {
      @apply mx-auto mb-24rpx w-[702rpx] shadow-[0rpx_6rpx_16rpx_0rpx_rgba(191, 191, 191, 0.26)] rounded-[20rpx] bg-#fff p-24rpx pt-0 pb-30rpx;

      :deep(.u-cell__body) {
        @apply px-0 py-12rpx min-h-96rpx;
      }

      :deep(.u-textarea__field) {
        @apply text-26rpx;
      }
    }
  }
</style>
